import React from 'react'
import * as Icons from '@ant-design/icons';
import ConfigIcon from '../../config/index'
  import { Button, Layout, Menu, theme } from 'antd';
  const { Header, Sider, Content } = Layout;
export default function index({collapsed}) {

    //将icon转换成图标
    const IconToElement=(name)=>React.createElement(Icons[name])

    //
    const items=ConfigIcon.map(icon=>{
        const child={
            key:icon.path,
            icon:IconToElement(icon.icon),
            label:icon.label
        }
        if(child.children){
            child.children=icon.children.map(item=>{
                return{
                    key:item.path,
                    label:item.label
                }
            })
        }
        return child
    })
  return (
    <div>
            <Sider trigger={null} 
            collapsed={collapsed}
            >
        <h3 style={{color:'white'}}>{collapsed?'后台':'最后一遍'}</h3>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={items}
        />
      </Sider>
    </div>
  )
}
